<script lang="ts" setup>
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'

import elplus from '../views/elplus.vue'
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}

const debounce = <T extends any[]>(fn: (...args: T) => void, delay: number) => {
    let timer: NodeJS.Timeout | null = null;
    return function (this: any, ...args: T) {
        let context = this;
        clearTimeout(timer as NodeJS.Timeout);
        timer = setTimeout(() => {
            fn.apply(context, args);
        }, delay);
    }
};



// const _ResizeObserver = window.ResizeObserver;
// window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
//     constructor(callback: any) {
//         callback = debounce(callback, 16);
//         super(callback);
//     }
// }

</script>

<template>
    <el-container class="layout">
        <el-aside width="200px" id="side" style="background-color: #545c64;">
            <div class="common-layout">
                <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
                    :default-openeds="['1']" default-active="1-1" text-color="#fff" @open="handleOpen"
                    @close="handleClose">
                    <el-sub-menu index="1">
                        <template #title>
                            <el-icon>
                                <setting />
                            </el-icon>
                            <span>工具</span>
                        </template>
                        <el-menu-item-group title="中台">
                            <router-link to="/591/accountRegister" exact>
                                <el-menu-item index="1-1">账号注册</el-menu-item>
                            </router-link>
                            <router-link to="/591/reCharge" exact>
                                <el-menu-item index="1-6">591快捷充值</el-menu-item>
                            </router-link>
                            <router-link to="/591/housePublish" exact>
                                <el-menu-item index="1-2">中古物件刊登</el-menu-item>
                            </router-link>
                        </el-menu-item-group>
                        <el-menu-item-group title="租售">
                            <router-link to="/591/sale_one_util" exact>
                                <el-menu-item index="1-3">搜寻倾向度</el-menu-item>
                            </router-link>
                            <router-link to="/591/sale_two_util" exact>
                                <el-menu-item index="1-4">租售工具2</el-menu-item>
                            </router-link>
                        </el-menu-item-group>


                        <!-- <el-sub-menu index="1-4">
                    <template #title>租售工具2</template>
                    <el-menu-item index="1-4-1">item one</el-menu-item>
                </el-sub-menu> -->
                        <el-menu-item-group title="新建案">
                            <router-link to="/591/buildUtil" exact>
                                <el-menu-item index="1-5">建案工具1</el-menu-item>
                            </router-link>
                        </el-menu-item-group>
                    </el-sub-menu>
                    <el-menu-item index="2" class="router-link">
                        <el-icon>
                            <setting />
                        </el-icon>
                        <router-link to="/591/dailyBug" exact>
                            <span>日常BUG统计</span>
                        </router-link>

                    </el-menu-item>
                    <!-- <el-menu-item index="3" disabled>
                <el-icon>
                    <document />
                </el-icon>
                <span>新建案</span>
            </el-menu-item> -->
                    <el-menu-item index="3">
                        <el-icon>
                            <CirclePlus />
                        </el-icon>
                        <router-link to="/591/testPlanCreate" exact>
                            <span>测试计划创建</span>
                        </router-link>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <el-icon>
                            <Promotion />
                        </el-icon>
                        <router-link to="/591/case_import" exact>
                            <span>用例转换与导入</span>
                        </router-link>
                    </el-menu-item>
                </el-menu>
            </div>
        </el-aside>
        <el-main id="main">
            <router-view></router-view>
        </el-main>

    </el-container>
</template>


<style scoped>
/* .el-header {
    background-color: #b3c0d1;
    color: #333;
    text-align: center;
    line-height: 60px;
} */

/* .el-aside {
    background-color: #d3dce6;
    color: #333;
    text-align: center;
    line-height: 300px;
    height: 800px;
}

.el-main {
    background-color: #e9eef3;
    color: #333;
    text-align: center;
    line-height: 160px;
} */

a {
    text-decoration: none;
    color: #fff;
}

/* .router-link-active {
    color: #ffd04b !important;
    活动状态的颜色
} */

.router-link-exact-active {
    color: #ffd04b !important;
    /* 精确匹配活动状态的颜色 */
}

/* a.router-link {
    color: #fff !important;
    非活动状态的颜色
} */


/* 去除左侧导航边框宽度 */
.el-menu {
    border: 0;
}


html,
body {
    width: 100%;
    height: 100%;
}

#side {
    margin: 0;
    padding: 0;
}

#app {
    width: 100%;
    height: 100%;
}

.el-container {
    width: 100%;
    height: 100%;
}

#main {
    margin: 0;
    padding: 0;
}

.layout {
    height: 100vh;
}

.el-aside {
    border: 0;
}
</style>